import Taro, { Component } from '@tarojs/taro'
import { CoverImage, CoverView } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { bindActionCreators } from "redux";

import { actions } from '../actions/tabPage'

import './index.scss'

const tabbar_lists = Taro.getApp().config.tabBar.list;

class CustomTabBar extends Component {
  switch_tab(index) {
    this.props.onSwitchTab(index);
  }

  render () {
    return (
      <CoverView className='tab-bar'>
        {tabbar_lists.map((item, i) => (
          <CoverView key={item.pagePath} className='tab-bar-item' onClick={this.switch_tab.bind(this, i)}>
            <CoverImage className={i == 1 ? 'large' : 'small'} src={i == this.props.tabPageIndex ? ('../'+item.selectedIconPath) : ('../'+item.iconPath)} />
          </CoverView>
        ))}
      </CoverView>
    )
  }
}

const mapStateToProps = ({tabPage}) => {
  return {
    tabPageIndex: tabPage.tabPageIndex
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    ...bindActionCreators(actions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomTabBar)
